

<template>
  <div class="selectAddress">
    <div class="container">
      <div class="address_tittle">确认收货地址</div>
      <div class="address_list">
        <div class="address_btn">
          <el-button class="btn" @click="editAddress()">管理收货地址</el-button>
        </div>
        <div class="list">
          <div class="toAddress">邮寄至：</div>
          <div class="toForm">
            <div
              class="toFormList"
              v-for="(item, index) in addressList"
              :key="index"
            >
              <el-radio-group v-model="radio" @click="radioChange(item, index)">
                <el-radio :label="item.id" class="el_radioInfo">
                  <span style="width: 800px;line-height: 25px;">
                    {{ item.province }}
                    {{ item.city }}
                    {{ item.county }}
                    {{ item.address }}
                    &nbsp;&nbsp;({{ item.recipient }})&nbsp;&nbsp;{{
                      item.mobile
                    }}
                  </span>
                  <span>
                    <span class="default_address" v-if="item.is_default == 2"
                      >默认地址</span
                    >
                    <el-button
                      class="el_button"
                      @click="editAddress(item, item.id)"
                      >修改本地址</el-button
                    >
                  </span>
                </el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <el-button class="ydSubmit" @click="sumbitBuy">确定易定</el-button>
      </div>
    </div>
  </div>
</template>
  <script setup>
import { onMounted, ref } from "vue";
import { Edit, Iphone, Lock } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { AddressIndex } from "@/api/address";
import { useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
defineProps({
  msg: String,
});
onMounted(() => {
  isFlag.value = route.query.isFlag;
  DetailId.value = route.query.DetailId;
  console.log("isFlag.value", isFlag.value);

  getAddressIndex();
});

const isFlag = ref("");
const DetailId = ref("");
const radio = ref(null);
const isClick = ref("");
const addressInfo = ref({});
const radioChange = (e, index) => {
  console.log("val", e, index);
  //   isClick.value = "1";
  radio.value = e.id;
  //存地址 易货大厅
  addressInfo.value = e;
  // if (isFlag.value == 1) {
  //   window.localStorage.setItem("addressChoose", JSON.stringify(e));
  // }

  // //存地址 购物车地址
  // if (isFlag.value == 2) {
  //   window.localStorage.setItem("cartaddressChoose", JSON.stringify(e));
  // }
};

//获取地址
const getAddressIndex = () => {
  AddressIndex().then((res) => {
    if (res.code == 1) {
      console.log("res地址", res.data.data);
      addressList.value = res.data.data;
    }
  });
};

//修改地址
const editAddress = (item, id) => {
  console.log("地址", item, id);
  router.push("/address-manage");
};
const clickitem = (event) => {
  console.log("event", event, event.target.tagName);
  if (event.target.tagName == "SPAN") {
    event.srcElement.defaultValue === radio.value
      ? (radio.value = "")
      : (radio.value = event.srcElement.defaultValue);
  }
};

const sumbitBuy = () => {
  if (isFlag.value == 1) {
    router.push({
      path: "/barter-hall-detail",
      query: {
        addressId: radio.value,
        id: DetailId.value,
        addressInfo:JSON.stringify(addressInfo.value)
      },
    });
  }
  if (isFlag.value == 2) {
    router.push({
      path: "/shopping-cart",
      query: {
        addressId: radio.value,
      },
    });
  }

  // router.back();
};
const addressList = ref([]);

//   const form = ref({
//     name: "",
//     region: "",
//     date1: "",
//     date2: "",
//     delivery: false,
//     type: [],
//     resource: "",
//     desc: "",
//     checked: false,
//     phone: "",
//     password: "",
//     code: "",
//   });

//   const phoneNumberRegex = /^1[3456789]\d{9}$/;

//   const onSubmit = () => {
//     if (!form.value.phone)
//       return ElMessage({ message: "请输入手机号", type: "error" });

//     if (!form.value.password)
//       return ElMessage({ message: "请输入密码", type: "error" });
//     if (!form.value.checked)
//       return ElMessage({ message: "请勾选协议", type: "error" });
//     if (!phoneNumberRegex.test(form.value.phone))
//       return ElMessage({ message: "请输入正确的手机号码", type: "error" });
//     console.log("submit!");
//     //成功登录
//     router.push({
//       path: "/homePage",
//       query: {
//         flag: "2",
//       },
//     });
//   };
</script>
  
  <style scoped lang="less">
  :deep(.el-radio__label) {
  width: 100% !important;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 18px;
  // word-wrap: break-word !important;    无效
}
.el_radioInfo {
  // border: 1px solid red;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

:deep(.el-radio-group) {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
:deep(.el-radio__label) {
  width: 100%;
  display: flex;
  align-items: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.default_address {
  margin-right: 17px;
  margin-left: 17px;
}
.el_button {
  // margin-right: 17px;
  width: 92px;
  height: 34px;
  background: #2487e8;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  font-size: 14px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
.selectAddress {
  // border: 1px solid red;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;

  .container {
    width: 1200px;
    // height: 500px;
    min-height:calc(100vh - 118px);
    margin-top: 30px;
    background-color: #fff;
    .address_tittle {
      width: 100%;
      height: 62px;
      line-height: 62px;
      text-align: center;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      border-bottom: 1px solid #e6e6e6;
      font-size: 24px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.87);
    }
    .address_list {
      box-sizing: border-box;
      padding: 29px;
      display: flex;
      flex-direction: column;
width: 1200px;
      .address_btn {
        display: flex;
        justify-content: flex-end;
        .btn {
          width: 140px;
          height: 42px;
          background: #2487e8;
          border-radius: 8px 8px 8px 8px;
          opacity: 1;
          font-size: 14px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
        }
      }
      .list {
        display: flex;
        margin-top: 20px;
        // border: 1px solid red;
        .toAddress {
          font-size: 16px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: rgba(0, 0, 0, 0.87);
          width: 78px;
        }
        .toForm {
          border: 1px solid #e6e6e6;
          padding: 0 12px;
          box-sizing: border-box;
          // width: 100%;
          box-sizing: border-box;
          flex: 1;
          .toFormList {
            display: flex;
            // flex-direction: column;
            // border: 1px solid red;
            height: 66px;
            line-height: 66px;
            align-items: center;
            width: 100%;
            border-bottom: 1px solid #e6e6e6;
          }
          .toFormList:last-child {
            border: none;
          }
        }
      }
      .ydSubmit {
        width: 140px;
        height: 42px;
        background: #2487e8;
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        margin: 34px auto;
      }
    }
  }
}
#app {
  padding: 0;
  margin: 0;
}
body {
  margin: 0;
  padding: 0;
}
</style>
  